

$primary-color : $black;
$primary-color-inverted : $white;

$secondary-color-light  : $grey-light;
$secondary-color-dark   : $grey;

@mixin headerskin($skin-overlay-color, $text-color) {

  $primary-color           : $text-color;
  $background-color        : $skin-overlay-color;
  $primary-color-inverted  : invert($primary-color);
  $secondary-color-light   : $grey;
  $secondary-color: null;
   @if ($primary-color == $white) {
     $secondary-color : $grey-light;
   }
     @else {
       $secondary-color : $grey-dark;
     }

/* overlays skin */
  .overlay {
    background: rgba($background-color, 0.98);
    color: $primary-color;
    a { color: $secondary-color-light; }
    a:hover { color: $primary-color; }
    .nav__container {
      nav {
        .primary-nav__menu > li { border-bottom: 0.5px solid rgba($secondary-color-light, 0.25); }
      a {  @include underlined ( $primary-color, 1px ); }
      }
    }
  }
/* end overlays skins */

  .ham__navbar-toggler.collapsed .ham-toggler-menu__span  { background: $primary-color;  }
  .ham-toggler-menu__span, .caret__dropdown-toggler__span {
       &:before, &:after {
         background: $primary-color;
      }
    }

    .secondary-navbar__wrapper
  {

    a, a:focus, a:active, li > .caret__dropdown-toggler { color: $secondary-color-dark;  }
    a:hover, a.current-active    { color: $primary-color; }
    ul.secondary-nav__menu > li > a {
        @include underlined ( $primary-color, 1px );
    }
  }
  #sticky-placeholder,
  .secondary-navbar__wrapper, .primary-navbar__wrapper  {
    background: $background-color;
  }

  .header-transparent {
    #sticky-placeholder { background: transparent }
    @media (min-width: 993px) {
      .secondary-navbar__wrapper, .primary-navbar__wrapper  {
        background: transparent;
      }
    }
    @media (min-width: 993px) {
      .primary-navbar__wrapper  {
        border-bottom: 1px solid rgba($primary-color, 0.09);
      }
    }
    & > div:not(.navbar-sticky) {
      @media (max-width: 992px) {
        .primary-navbar__wrapper  {
          @include box-shadow(0px, 2px, 2px, rgba(102, 102, 102, .08));
        }
      }
    }
  }


  .secondary-navbar__wrapper  {
    border-bottom: 1px solid rgba($primary-color, 0.09);
  }

  header:not(.header-transparent) {
    .primary-navbar__wrapper {
      @extend .shadow;
    }

  }

    .image__header .header-content {
      .post-info a,  .category-info a { color:$primary-color; }
      .post-info a:hover,  .category-info a:hover { color:$secondary-color-light; }
      .category-info:after { background-color:$primary-color; }
    }


  .primary-nav__utils {
     color: $primary-color;
    a, a:focus, a:active { color: $primary-color; @include transition (all 0.3s ease);  }
    a:hover, a.current-active    { color: $secondary-color-light;   }

       @media (min-width: 993px) {
         .primary-nav__socials .socials { @include v-divider ($base-line-height, rgba($primary-color, 0.09), left, 1); }
         .utils li { @include v-divider ($base-line-height, rgba($primary-color, 0.09), left, 1); }

       }
        @media (max-width: 992px) {
         .primary-nav__socials .socials { border-top: 1px solid rgba($primary-color, 0.09);  }
       }
  }
  .dropdown-item:before {
    background-color: rgba( $primary-color-inverted, 0.15);
  }
  .dropdown-menu,
  .dropdown-item:focus,
  .dropdown-item:hover {
    background: $background-color;
  }

  .branding {
      a { color:$primary-color; }
           .has_tagline {
             .navbar-brand-tagline { color: $secondary-color }
        a {
            span::after {
          content: "";
          position: absolute;
          width: 33%;
          height: 3px;
          bottom: 0;
          left: 0;
          background: $primary-color;
        }
           }
         }
  }
   .mobile-woocart__container a { color:$primary-color; }
   .hamburger-toggler__container,
     .mobile-woocart__container {
        @include v-divider ($base-line-height, rgba($primary-color, 0.09), left, 1);

     }

  .primary-nav__menu {

    & > li >  a, .caret__dropdown-toggler {
      color: $primary-color;

    }
    & > li:not(.dropdown-item) > a {
      & > span:first-of-type { @include underlined ($primary-color, 2px); }
    }
    & > li.active > a, &  li.current-active > a {
      color: $secondary-color;
        & > span:first-of-type { @include underlined_simple ($secondary-color, 2px); }
    }
      &  li.active {
      .caret__dropdown-toggler__span:after,
      .caret__dropdown-toggler__span:before  {
        background: $secondary-color-dark;
      }
    }
    .dropdown-menu a { color: $primary-color; }
    .dropdown-menu a:hover, li.active > a  { color: $secondary-color;  }
    .dropdown-item  a { color: $secondary-color; }
    .dropdown-item:hover a { color: $primary-color; }

  }

        .dropdown-item:not(:last-of-type) {
           border-bottom: 0.5px solid rgba($secondary-color-dark, 0.15);
        }

  @media (max-width: 991px) {
    .primary-navbar__wrapper .primary-nav__container nav {
        border-top: 1px solid rgba($primary-color, 0.075);
     }
    .primary-nav__container,
    .branding__container {
      background: rgba($background-color, 1);
    }
    .primary-nav__container {
      border-bottom: 1px solid rgba($primary-color, 0.075);
    }
    .primary-nav__menu {
      & > li {
          border-bottom: 1px solid rgba($primary-color, 0.075);
    }
    }

   }

  .header-transparent .navbar-sticky { background: rgba($background-color, 0.95); }

  header .czr-form, .overlay .czr-form {
    .form-group label {
       color: $primary-color;
    }
     .form-group.in-focus label {
       color: $secondary-color-light;
     }
     .form-control {
       color: $primary-color;
       border-color: $primary-color;
     }
  }
}
/* end mixin */

  .header-skin-light  {
    @include headerskin($white, $black);
  }
  .header-skin-dark  {
    @include headerskin($black, $white);
  }